<template>
	<view class="container">
		<view class="student-list">
			<view v-for="item in studentList" :key="item.id" class="student-item" @click="handlItemClick(item)">
				<view>
					{{ item.id}} - {{ item.name }}({{ item.sex === 1 ? '男' : '女'}})-{{ [item.mobile, item.mobile1].filter((item) => item).join() }}
					<view>
						家长: {{ [`${item.parent_name}-${item.parent_mobile}`, `${item.parent_name1}-${item.parent_mobile1}`].filter((item) => item !== '-').join() }}
					</view>
				</view>
				<button @stop.click="handleDeleteClick(item)" size="mini" class="del">删除</button>
			</view>
		</view>
		<button @click="handleAddClick" class="student-add">登记学生信息</button>
	</view>
</template>

<script>
import { list, del } from "@/api/student.js";

export default {
	data() {
		return {
			studentList: [],
		}
	},
	onLoad() {
		this.getList();
	},
	methods: {
		getList() {
			uni.showNavigationBarLoading();
			return list().then(({ total, rows }) => {
				console.warn(total);
				this.studentList.splice(0, this.studentList.length, ...rows);
			}).catch(console.warn).finally(uni.hideNavigationBarLoading);
		},
		handleAddClick() {
			uni.navigateTo({
				url: '/pagesStudent/add'
			});
		},
		handleDeleteClick(item) {
			uni.showLoading({
				title: '删除中'
			});
			del({
				id: item.id
			}).then((res) => {
				uni.showToast({
					title: '已删除'
				});
				this.getList();
			}).catch(console.warn).finally(uni.hideLoading());
		},
		handlItemClick({ id }) {
			uni.navigateTo({
				url: `/pagesStudent/add?id=${id}`
			});
		},
	}
}
</script>

<style lang="scss" scoped>
	.student-list {
		background-color: white;
	}
	.student-item {
		min-height: 90rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 20rpx;
		.del {
			flex: none;
		}
	}
	.student-item + .student-item {
		border-top: $km-border-color solid 1rpx;
	}
	.student-add {
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}
</style>
